<template>
    <div class="container">
        <div ref="myChart" class="echarts-map"/>
        <div class="switch-btn">
            <el-radio-group v-model="state" size="mini">
                <el-radio-button :label="1">出口</el-radio-button>
                <el-radio-button :label="2">进口</el-radio-button>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
export default {
    name: "ChinaMap",
    data() {
        return {
            option: {
                // 标题
                titleText: String,
                // 汇聚组数组：[{target: '汇聚目标点1', points: ['汇聚起始点1.1', '汇聚起始点1.2']}, {target: '汇聚目标点2', points: ['汇聚起始点2.1', '汇聚起始点2.2']}]
                convergenceGroupArray: Array,
                // 发散组数组：[{target: '发散起始点1', points: ['发散目标点1.1', '发散目标点1.2']}, {target: '发散起始点2', points: ['发散目标点2.1', '发散目标点2.2']}]
                divergenceGroupArray: Array,
            },
            state: 1,
            pointDictionary: [
                {code: 'VNSGN', name: '胡志明市', point: [106.6296638, 10.8230989]},
                {code: 'IDJKT', name: '雅加达', point: [106.845599, -6.2087634]},
                {code: 'THLCH', name: '林查班', point: [100.9158073, 13.1040552]},
                {code: 'MYPKG', name: '巴生港', point: [101.4086, 3.005078]},
                {code: 'AEJEA', name: '杰贝阿里', point: [55.0272904, 24.9857145]},
                {code: 'CNSHE', name: '南山', point: [113.916509, 22.483182]},
                {code: 'HKHKG', name: '香港', point: [114.109497, 22.396428]},
                {code: 'SGSGP', name: '新加坡', point: [103.819836, 1.352083]},
                {code: 'AEDAS', name: '达斯岛', point: [52.8768212, 25.1546848]},
                {code: 'THBKK', name: '曼谷', point: [100.5017651, 13.7563309]},
                {code: 'DOCAU', name: '考塞多', point: [-69.6308326, 18.425741]},
                {code: 'JMKIN', name: '金斯敦', point: [-76.8099041, 18.0178743]},
                {code: 'JPYOK', name: '横滨', point: [35.4437078, 139.6380256]},
                {code: 'ITGOA', name: '热那亚', point: [8.946256, 44.4056499]},
                {code: 'USLSA', name: '洛杉矶', point: [-118.2436849, 34.0522342]},
                {code: 'USBOS', name: '波士顿', point: [-71.0588801, 42.3600825]},
                {code: 'GBLON', name: '伦敦', point: [-0.1277583, 51.5073509]},
                {code: 'GBLIV', name: '利物浦', point: [-2.9915726, 53.4083714]},
                {code: 'DEDOR', name: '多特蒙德', point: [7.4652981, 51.5135872]},
                {code: 'ZAPEL', name: '伊丽莎白港', point: [25.5207358, -33.7139247]},
                {code: 'KRSEL', name: '首尔', point: [126.9779692, 37.566535]},
                {code: 'USNYK', name: '纽约', point: [-74.0059413, 40.7127837]},
                {code: 'ESMAD', name: '马德里', point: [-3.7037902, 40.4167754]},
                {code: 'IECOK', name: '科克', point: [-8.4863157, 51.8968917]},
                {code: 'JPOSK', name: '大阪', point: [135.5021651, 34.6937378]},
                {code: 'JPOSK', name: "南山", point: [113.92943, 22.531221]},
                {code: 'JPOSK', name: "新加坡", point: [103.50, 1.16]},
                {code: 'JPOSK', name: "惠州", point: [114.413978, 23.079883]},
                {code: 'JPOSK', name: "东莞", point: [113.746262, 23.046237]},
                {code: 'JPOSK', name: "中山", point: [113.382391, 22.521113]},
                {code: 'CNHPU', name: '黄埔', point: [113.2616, 23.0549]},
                {code: 'CNHUA', name: '黄埔', point: [113.2616, 23.0549]},
                {code: 'test', name: "佛山", point: [113.112414, 23.019643]},
                {code: 'test', name: "湖南", point: [112.982279, 28.19409]},
                {code: 'test', name: "湖北", point: [114.298572, 30.584355]},
                {code: 'test', name: "广西", point: [108.320004, 22.82402]},
                {code: 'test', name: "云南", point: [102.712251, 25.040609]},
                {code: 'test', name: "贵州", point: [106.713478, 26.578343]},
                {code: 'test', name: "香港", point: [114.1543731, 22.28198083]},
                {code: 'test', name: "澳门", point: [113.5528956, 22.20787]},
                {code: 'test', name: "台湾", point: [121.509062, 25.044332]}],
            series: [],
            outSeriesLinesData: [],
            outSeriesEffectScatterData: [],
            inSeriesLinesData: [],
            inSeriesEffectScatterData: [],
            color: ['#9ae5fc', '#dcbf71'],
            myChart: {},
            tempOption: {}
        }
    },

    methods: {
        /**
         * 初始化汇聚组和发散组路径的坐标点数据
         */
        initOutLinesData(convergenceGroupArray) {
            let _this = this;

            _this.$echarts.registerMap('guangdong', require('/src/assets/json/guangdong.json'));

            // 遍历汇聚组
            convergenceGroupArray.forEach(convergenceGroup => {
                // 汇聚目标点
                let target = convergenceGroup.target;
                let targetPoint = _this.pointDictionary.find((item) => target === item.name);
                _this.outSeriesEffectScatterData.push({
                    name: targetPoint.name,
                    value: targetPoint.point,
                    symbolSize: 15,
                    label: {show: true, fontSize: 26, color: '#ffa04d'}
                });
                // 汇聚起始点数组
                let points = convergenceGroup.points;
                // let pointsGoodsThr = convergenceGroup.pointsGoodsThr;
                // 遍历汇聚起始点数组
                points.forEach((point, index) => {
                    let find = _this.pointDictionary.find((item) => point === item.name);
                    _this.outSeriesEffectScatterData.push({
                        name: find.name,
                        value: find.point,
                        symbolSize: 10,
                        label: {color: '#FFFFFF'},
                        // tooltip: {
                        //     formatter: '{b}: ' + pointsGoodsThr[index]
                        // }
                    });
                    _this.outSeriesLinesData.push({
                        coords: [
                            find.point,  // 起点
                            targetPoint.point          // 终点
                        ],
                        // 统一的样式设置
                        // lineStyle: {}
                    })
                });
            })
        },

        /**
         * 初始化汇聚组和发散组路径的坐标点数据
         */
        initInLinesData(divergenceGroupArray) {
            let _this = this;
            // 遍历汇聚组
            divergenceGroupArray.forEach(divergenceGroup => {
                // 汇聚目标点
                let target = divergenceGroup.target;
                let targetPoint = _this.pointDictionary.find((item) => target === item.name);
                _this.inSeriesEffectScatterData.push({
                    name: targetPoint.name,
                    value: targetPoint.point,
                    symbolSize: 10,
                    label: {show: true, fontSize: 26, color: '#ffa04d'},
                });

                // 汇聚起始点数组
                let points = divergenceGroup.points;
                // 遍历汇聚起始点数组
                points.forEach(point => {
                    let find = _this.pointDictionary.find((item) => point === item.name);
                    _this.inSeriesEffectScatterData.push({
                        name: find.name,
                        value: find.point,
                        symbolSize: 10,
                        label: {color: '#FFFFFF'}
                    });
                    _this.inSeriesLinesData.push({
                        coords: [
                            targetPoint.point,  // 起点
                            find.point  // 终点
                        ],
                        // 统一的样式设置
                        // lineStyle: {}
                    })
                });
            })
        },

        /**
         * 初始化散点和路径特效
         */
        initSeries() {
            let _this = this;
            // 初始汇聚散路径 seriesData
            _this.initOutLinesData(_this.option.convergenceGroupArray);

            _this.series = _this.getSeriesData(_this.outSeriesLinesData, _this.outSeriesEffectScatterData)
        },

        /**
         * 获取 Series
         */
        getSeriesData(seriesLinesData, seriesEffectScatterData) {
            let _this = this
            let series = [];
            series.push(
                {
                    // 白色航线特效图
                    type: 'lines',
                    zlevel: 1, // 用于分层，z-index的效果
                    effect: {
                        show: true, // 动效是否显示
                        period: 6, // 特效动画时间
                        trailLength: 0.7, // 特效尾迹的长度
                        color: '#fff', // 特效颜色
                        symbolSize: 4 // 飞机尾迹特效大小
                    },
                    lineStyle: {
                        normal: { // 正常情况下的线条样式
                            color: _this.color[0],
                            width: 0.3, // 线条粗细，因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
                            curveness: -0.2 // 线条曲度
                        }
                    },
                    data: seriesLinesData // 特效的起始、终点位置
                },
                {
                    // 小飞机航线效果
                    type: 'lines',
                    zlevel: 2,
                    // symbol: ['none', 'arrow'],   // 用于设置箭头
                    // symbolSize: 100000, // 线条大小
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        // symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
                        symbolSize: 5 // 箭头大小
                    },
                    lineStyle: {
                        normal: {
                            color: _this.color[0],
                            width: 0.5,
                            opacity: 0.6,
                            curveness: -0.2
                        }
                    },
                    data: seriesLinesData // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
                },
                {
                    // 散点效果
                    type: 'effectScatter',
                    coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
                    zlevel: 3,
                    rippleEffect: {
                        brushType: 'stroke' // 波纹绘制效果
                    },
                    label: {
                        normal: { // 默认的文本标签显示样式
                            show: true,
                            position: 'left', // 标签显示的位置
                            // position: getPosition(item[1]), // 标签显示的位置
                            // formatter: '{b}' // 标签内容格式器
                            formatter: '{b}',
                            fontSize: 16
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: _this.color[0]
                        }
                    },
                    data: seriesEffectScatterData
                });
            return series;
        },

        /**
         * 获取 option
         */
        getOption(series) {
            return {
                // 组件背景颜色和字体
                backgroundColor: 'rgba(11,32,53,0)',
                textStyle: {
                    fontSize: 16
                },
                // 组件的标题
                title: {
                    text: this.option.titleText,
                    //subtext: '国别资讯',
                    textStyle: {
                        color: '#fff',
                        fontSize: '26px'
                    },
                    top: '10px',
                    left: '10px'
                },
                tooltip: {
                    show: false,
                },
                // 组件地理坐标系底图
                geo: {
                    map: 'guangdong', // 与引用进来的地图js名字一致
                    // center: [104.114129, 37.550339],//当前视角的中心点
                    zoom: 1, //当前视角的缩放比例
                    roam: true, //是否开启平游或缩放
                    scaleLimit: { //滚轮缩放的极限控制
                        min: 1,
                        max: 100
                    },
                    // 每个区域的样式
                    itemStyle: {
                        normal: {
                            areaColor: '#074a57'
                        },
                        emphasis: {
                            areaColor: '#019cba'
                        }
                    },
                },
                // 组件的散点、线条
                series: series,
            };
        },

        /**
         * 转换方向
         */
        converse(newVal) {
            let _this = this;

            if (newVal === 2) {
                _this.tempOption.title.text = '南山港外贸进口货物流向';
                _this.tempOption.series = _this.getSeriesData(_this.inSeriesLinesData, _this.inSeriesEffectScatterData);

            } else {
                _this.tempOption.title.text = '南山港外贸出口货物来源';
                _this.tempOption.series = _this.getSeriesData(_this.outSeriesLinesData, _this.outSeriesEffectScatterData);
            }

            _this.myChart.setOption(_this.tempOption, true);
        },

        initOption(optionData) {
            let _this = this;
            _this.myChart = _this.$echarts.init(_this.$refs.myChart);
            _this.option = optionData;

            // 初始化地图上的点和轨迹
            _this.initSeries();

            // 定义 echarts 组件配置项
            _this.tempOption = _this.getOption(_this.series);

            // 设置配置项
            _this.myChart.setOption(_this.tempOption)

            // 初始化另一组数据
            _this.initInLinesData(_this.option.divergenceGroupArray)
        }
    },

    watch: {
        state: function (newVal) {
            this.converse(newVal);
            this.$emit('converseAnother', newVal);
        }
    },
}
</script>

<style scoped>
.container {
    position: relative;
}

.echarts-map {
    height: 100%;
    width: 100%;
}

.switch-btn {
    position: absolute;
    top: 14px;
    right: 20px;
}
</style>